<template>
  <div>
    <div>
      <div>
        <el-text class="mx-1" size="large">Large</el-text>
      </div>
      <div>
        <el-text class="mx-1">Default</el-text>
      </div>
      <div>
        <el-text class="mx-1" size="small">Small</el-text>
      </div>
    </div>
    <el-button type="primary" @click="dialogVisible = true"
      >open dialog</el-button
    >
    <vxe-table :data="tableData">
      <vxe-column type="seq" width="70"></vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="sex" title="Sex"></vxe-column>
      <vxe-column field="age" title="Age"></vxe-column>
    </vxe-table>
  </div>
  <hc-dialog v-model="dialogVisible" title="hc dialog">
    <div>hc dialog body</div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </div>
    </template>
  </hc-dialog>
</template>

<script setup lang="ts">
import { VxeColumn, VxeTable } from 'vxe-table';

const dialogVisible = ref(false);

interface RowVO {
  id: number;
  name: string;
  role: string;
  sex: string;
  age: number;
  address: string;
}

const tableData = ref<RowVO[]>([
  {
    id: 10001,
    name: 'Test1',
    role: 'Develop',
    sex: 'Man',
    age: 28,
    address: 'test abc',
  },
  {
    id: 10002,
    name: 'Test2',
    role: 'Test',
    sex: 'Women',
    age: 22,
    address: 'Guangzhou',
  },
  {
    id: 10003,
    name: 'Test3',
    role: 'PM',
    sex: 'Man',
    age: 32,
    address: 'Shanghai',
  },
  {
    id: 10004,
    name: 'Test4',
    role: 'Designer',
    sex: 'Women',
    age: 24,
    address: 'Shanghai',
  },
]);
</script>
